<template>
<!-- 整体布局 -->
<view class="block">
    <!-- 图片 -->
    <img :src="picture"/>
    <!-- 文本布局 -->
    <view class="info">
        <!-- 菜品名称 -->
        <text class="name">{{name}}</text>
        <!-- 菜品介绍 -->
        <view class="content"></view>
        <!-- 文本底部布局 -->
        <view class="bottom">
            <!-- 价格显示 -->
            <text class="price">{{priceTag}}</text>
            <!-- 购物状态栏 -->
            <view class="counter">
                <!-- 减购按钮 -->
                <IconButton @click="cut" v-if="showCount">-</IconButton>
                <!-- 菜品数量 -->
                <text class="count" v-if="showCount">{{dishCount}}</text>
                <!-- 加购按钮 -->
                <IconButton @click="add" :class="bankStatus?'icon-allowed':'icon-disabled'">+</IconButton>
            </view>
        </view>
    </view>
    <!-- 弹出层组件 -->
    <Popup ref="popup">
        <!-- 弹出层顶栏 -->
        <view class="top-bar">
            <TextButton class="popup-cancel-button" @click="cancel">取消</TextButton>
            <text v-if="props.type==='mainDish'" class="current-price">{{currentPriceTag}}</text>
            <TextButton :class="buttonStyles[buttonStatus]" @click="submitOptions">确定</TextButton>
        </view>
        <!-- 主菜清单中菜品选项 -->
        <view v-if="(!(props.options instanceof Array))">
            <view v-for="option,item in props.options">
                <!-- 非加量选项为一组单选按钮 -->
                <view v-if="(typeof option) !== 'number'">
                    <radio-group>
                        <b>{{item}}:&nbsp;</b>
                        <view v-for="value,index in option">
                            <label class="option-line" @click="chooseOption(item,index,value)">
                                {{value}}<radio color="green" @click="chooseOption(item,index,value)"/>
                            </label>
                        </view>
                    </radio-group>
                </view>
                <!-- 加量选项为一个开关按钮 -->
                <view v-else>
                    <label>
                        <b class="plus-option">{{item}}</b>
                        <switch color="green" :checked="checked" @change="plus(option)"/>
                    </label>
                </view>
            </view>
        </view>
        <!-- “自选四拼煲”菜品选项 -->
        <view v-else>
            <!-- 滚动选择器 -->
            <picker-view :value="pickerOptions" @change="changeOptions">
                <!-- 口味选择器列 -->
                <picker-view-column>
                    <view v-for="item in props.options[0]" class="option">
                        {{item}}
                    </view>
                </picker-view-column>
                <!-- 菜品选择器列 -->
                <picker-view-column v-for="i in 4">
                    <view v-for="item in props.options[1]" class="option">
                        {{item}}
                    </view>
                </picker-view-column>
            </picker-view>
        </view>
    </Popup>
</view>
</template>

<script lang="ts" setup>
import {computed, ref, type Ref} from 'vue';
//导入弹出层组件
import Popup from './Popup.vue';
//导入文本按钮组件
import TextButton from './TextButton.vue';
//导入图标按钮组件
import IconButton from './IconButton.vue';
//使用全局状态-购物清单、库存信息
import { useListStore,type ShoppingList } from '../../stores/list';
import { useBankStore } from '../../stores/bank';
const shoppingList=useListStore();
const bankInfo=useBankStore();
//接收父组件传入的图片路径、菜品名称、菜品价格、菜品种类、菜品选项
const props=defineProps<{
    picture:string,
    name:string,
    price:number|number[],
    type:string,
    options:object
}>();
//初始化菜品数量
const dishCount=computed<number>(()=>{
    if(props.name in shoppingList.detail){
        return (shoppingList.detail)[props.name].count;
    }else{
        return 0;
    }
});
//生成菜品最低价格
const minPrice:number=(props.price instanceof Array)?(props.price[0]):(props.price);
//生成菜品价格标签
const priceTag=computed<string>(()=>{
    const suffix:string=(props.type === 'mainDish')?'~':'';
    return `￥${minPrice.toFixed(2)}${suffix}`;
});
//初始化加购按钮可用性状态
const bankStatus=computed<boolean>(()=>{
    if(props.name in bankInfo.detail){
        return (bankInfo.detail)[props.name];
    }
    return true;
});
//初始化菜品数量与减购按钮的显示状态
const showCount=computed<boolean>(()=>{
    return dishCount.value>0;
});
//注册弹出层组件引用
type PopupComponent=InstanceType<typeof Popup>;
const popup=ref<PopupComponent>();
//初始化基本价格
const basePrice=ref<number>(minPrice);
//初始化菜品选项状态
interface DishOptionStatus{
    size?:string,
    taste:string,
    dishes:[string,string],
    plus?:boolean
}
const dishOptionStatus=ref({dishes:['','']} as DishOptionStatus);
//定义按钮选项回调函数
function chooseOption(item:string,index:number,value:string):void{
    switch(item){
        case '规格':
            basePrice.value=(props.price as number[])[index];
            dishOptionStatus.value.size=value;
            break;
        case '口味':
            dishOptionStatus.value.taste=value;
            break;
        default:
            (dishOptionStatus.value.dishes)[Number(item[2])-1]=value;
            break;
    }
}
//初始化滚动选择器
const pickerOptions=ref<number[]>(Array(5).fill(0));
//定义滚动选择器回调函数
function changeOptions(event:Event):void{
    pickerOptions.value=event.detail.value;
}
//初始化加量选项
const checked=ref<boolean>(false);
//初始化额外价格
const extraPrice=ref<number>(0);
//定义加量选项回调事件
function plus(price:number){
    checked.value=!checked.value;
    extraPrice.value=checked.value?price:0;
    dishOptionStatus.value.plus=checked.value;
}
//初始化当前价格
const currentPrice=computed<number>(()=>{
    return extraPrice.value+basePrice.value;
})
//初始化弹出层价格标签
const currentPriceTag=computed<string>(()=>{
    return `￥${(currentPrice.value).toFixed(2)}`;
});
//初始化确定按钮可用性状态
const buttonStatus=computed<string>(()=>{
    if(props.type === 'mainDish'){
        if(
            (!('taste' in dishOptionStatus.value)) ||
            (dishOptionStatus.value.dishes.includes('')) ||
            (
                (props.name.includes('鸡')) &&
                (props.name !== '牛蛙鸡煲') &&
                (!('size' in dishOptionStatus.value))
            )
        ){
            return 'disabled';
        }
    }
    return 'allowed';
});
//声明标识按钮可用性状态的样式
interface ButtonStyle{
    [index:string]:string
}
const buttonStyles:ButtonStyle={
    disabled:'popup-ok-button-disabled',
    allowed:'popup-ok-button-allowed'
};
//定义生成购物清单选项函数
function createShoppingListItem(name:string,count:number):ShoppingList{
    return {
        [name]:{
            price:currentPrice.value,
            count
        }
    };
}
//定义点击确定按钮的回调函数
function submitOptions():void{
    //按钮不可用时
    if(buttonStatus.value === 'disabled'){
        return;
    }
    //初始化购物清单中的菜品名称
    let parts:string[];
    if(props.type === 'DIY'){
        //当菜品为自选四拼煲时
        const dishes:string[]=pickerOptions.value.slice(1)
            .map((index)=>(props.options as Array<string[]>)[1][index]).sort();
        const taste:string=(props.options as Array<string[]>)[0][(pickerOptions.value)[0]];
        parts=[props.type,...dishes,taste];
    }else{
        //当菜品为其它煲时
        parts=[props.name,dishOptionStatus.value.taste];
        if('size' in dishOptionStatus.value){
            parts.push(dishOptionStatus.value.size as string);
        }
        if(dishOptionStatus.value.plus){
            parts.push('加量');
        }
        parts=parts.concat(dishOptionStatus.value.dishes.sort());
    }
    //拼接购物清单中的菜品名称
    const name:string=parts.join('-');
    //生成购物清单中的菜品条目
    const item:ShoppingList=createShoppingListItem(name,1);
    //更新全局状态-购物清单
    shoppingList.update(item);
    //初始化相关状态
    cancel();
}
//定义点击取消按钮的回调函数
function cancel():void{
    //关闭弹出层
    (popup as Ref<PopupComponent>).value.close();
    //重置基本价格
    basePrice.value=minPrice;
    //重置加量选项开关
    checked.value=false;
    //重置额外价格
    extraPrice.value=0;
    //重置菜品选项
    dishOptionStatus.value={dishes:['','']} as DishOptionStatus;
    //重置滚动选择器
    pickerOptions.value=Array(5).fill(0);
}
//定义点击加购按钮的回调函数
function add():void{
    //当按钮不可用时
    if(!(bankStatus.value)){
        return;
    }
    if(['mainDish','DIY'].includes(props.type)){
        //当需要选择规格时
        (popup as Ref<PopupComponent>).value.open();
    }else{
        //不需要选择规格时
        //生成购物清单中菜品条目
        const item:ShoppingList=createShoppingListItem(props.name,1);
        //更新全局状态-购物清单
        shoppingList.update(item);
    }
}
//定义点击减购按钮的回调函数
function cut():void{
    //生成购物清单中菜品条目
    const item:ShoppingList=createShoppingListItem(props.name,-1);
    //更新全局状态-购物清单
    shoppingList.update(item);
}
</script>

<style lang="scss" scoped>
$text-height:6.25vw;
$picture-side-length:calc((100vw - 28vw) * 0.4);
$block-margin:calc($picture-side-length / 20);
$info-width:calc($picture-side-length * 1.5 - 4 * $block-margin);
$content-height:calc($picture-side-length - 12.5vw);
@import '../../styles/textLayout.scss';
/* 弹性布局 */
.block,.counter{
    display:flex;
}
/* 整体布局纵向边距 */
.block{
    margin-bottom:$text-height;
}
/* 图片布局样式 */
img{
    width:$picture-side-length;
    height:$picture-side-length;
    margin:$block-margin;
}
/* 信息栏布局 */
.info{
    display:flex;
    flex-direction: column;
    margin: {
        right: calc($block-margin * 2);
        bottom: $block-margin;
        top: $block-margin;
    }
    width:$info-width;
    font-size:5.5vw;
}
/* 文本公共布局样式 */
text{
    @extend %text-layout;
}
/* 菜品名称文本左对齐 */
.name{
    text-align:left;
}
/* 菜品介绍文本块高度 */
.content{
    height:$content-height;
}
/* 菜品价格、加购按钮所在行布局样式 */
.bottom{
    display:flex;
    justify-content: space-between;
}
/* 价格文本为红色 */
.price{
    color:red;
}
/* 加购按钮样式-可用 */
.icon-allowed{
    background-color:green;
}
/* 加购按钮样式-不可用 */
.icon-disabled{
    background-color: grey;
}
/* 菜品数量文本块宽度 */
.count{
    width:$text-height;
}
/* 弹出框顶栏布局 */
.top-bar{
    display: flex;
    justify-content: space-between;
    margin-bottom:5vw;
}
/* 按钮公共样式 */
%button-style{
    border: {
        width:1px;
        style:solid;
        color:grey;
    }
}
/* 取消按钮样式 */
:global(.popup-cancel-button){
    @extend %button-style;
    color:red;
}
/* 确定按钮样式-可用 */
:global(.popup-ok-button-allowed){
    @extend %button-style;
    color:green;
}
/* 确定按钮样式-不可用 */
:global(.popup-ok-button-disabled){
    @extend %button-style;
    color:white;
    background-color:grey;
}
/* 设置当前价格显示标签文本样式 */
.current-price{
    height:9.375vw;
    line-height:9.375vw;
    font-size:6.25vw;
}
/* 弹出框选项布局 */
radio-group{
    display:flex;
    margin-bottom: 2vw;
}
/* 弹出框选项名称文本字体大小 */
b{
    font-size:5vw;
}
/* 弹出框选项行布局 */
label{
    display:flex;
}
/* 弹出框选项行文本布局样式 */
.option-line{
    font-size:4vw;
    margin-left:0.5vw;
}
/* 弹出框选项按钮样式 */
radio{
    transform: scale(0.8);
}
/* 加量选项文本样式 */
.plus-option{
    line-height:10vw;
}
/* 加量选项开关按钮样式 */
switch{
    transform: scale(0.6);
}
/* 滚动选择器高度 */
picker-view{
    height:30vh;
}
/* 滚动选择器选项字体大小 */
.option{
    font-size:3.5vw;
}
</style>
